<template>
    <el-select v-model="selectValue" placeholder="请选择模型" @change="handleChange">
        <template #prefix>
            <div v-if="selectLogo" class="flex items-center">
                <el-image class="w-[16px] h-[16px] mr-2" :src="selectLogo" />
            </div>
        </template>
        <template v-for="item in modelsLists" :key="item.mark">
            <div class="models-select">
                <h6 v-if="type === 'chat'">{{ item.name }}</h6>
                <el-option
                    v-for="llm in item.models"
                    :key="llm.model"
                    :label="llm.alias"
                    :value="item.mark + ':' + llm.model"
                >
                    <div class="flex items-center">
                        <el-image class="w-[16px] h-[16px] mr-2" :src="item.logo" />
                        <span>{{ llm.alias }}</span>
                    </div>
                </el-option>
            </div>
        </template>
    </el-select>
</template>

<script lang="ts">
import useAppStore from '@/stores/modules/app'

export default defineComponent({
    name: 'ChatModels',
    props: {
        modelValue: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: 'chat'
        }
    },
    emits: ['change', 'update:modelValue'],
    setup(props, { emit }) {
        const appStore = useAppStore()
        const selectLogo = ref<string>('')
        const selectValue = ref<string>('')
        const modelSelect = computed(() => appStore.getSysModels)
        const modelsLists = ref(modelSelect.value.chat_models)

        const handleChange = (val: any) => {
            const model: string = val.split(':')[1]
            const channel: string = val.split(':')[0]
            let config = []
            let models = []
            for (let i = 0; i < modelsLists.value.length; i++) {
                const item: any = modelsLists.value[i]
                if (item.mark === channel) {
                    config = item.config
                    for (let k = 0; k < item.models.length; k++) {
                        if (item.models[k].model === model) {
                            models = item.models[k]
                            break
                        }
                    }
                    break
                }
            }

            emit('update:modelValue', val)
            emit('change', {
                'name': val,
                'config': config,
                'models': models
            })
        }

        watch(() => props.modelValue,
            (value) => {
                selectValue.value = value
                if (modelsLists.value) {
                    const mark: string = props.modelValue.split(':')[0]
                    for (let i = 0; i < modelsLists.value.length; i++) {
                        if (modelsLists.value[i].mark === mark) {
                            selectLogo.value = modelsLists.value[i].logo
                            break
                        }
                    }
                }
            },
            { immediate: true }
        )

        onMounted(async () => {
            if (props.type === 'vector') {
                modelsLists.value = modelSelect.value.vector_models
            } else if (props.type === 'ranking') {
                modelsLists.value = modelSelect.value.ranking_models
            } else {
                modelsLists.value = modelSelect.value.chat_models
            }

            if (modelsLists.value.length > 0 && props.modelValue) {
                selectValue.value = ''
                const mark: string = props.modelValue.split(':')[0] || ''
                const model: string = props.modelValue.split(':')[1] || ''
                for (let i = 0; i < modelsLists.value.length; i++) {
                    const item: any = modelsLists.value[i]
                    if (item.mark === mark) {
                        for (let k = 0; k < item.models.length; k++) {
                            // eslint-disable-next-line max-depth
                            if (item.models[k].model === model) {
                                selectLogo.value = item.logo
                                selectValue.value = props.modelValue
                                break
                            }
                        }
                    }
                }
            }
        })

        return {
            selectLogo,
            selectValue,
            modelsLists,
            handleChange
        }
    }
})
</script>

<style scoped lang="scss">
.models-select {
    padding: 6px 0;
    border-bottom: 1px solid var(--el-bg-color-page);
    &:last-child {
        border-bottom: 0;
    }
    h6 {
        padding: 4px 0;
        margin-left: 20px;
        font-size: var( --el-font-size-sm);
        color: var(--el-text-color-placeholder);
    }
    .el-select-dropdown__item {
        margin: 0 5px;
        border-radius: 4px;
        &.is-hovering {
            background-color: var(--el-bg-color-page);
        }
    }
}
</style>
